import React, { useState } from "react";
import { Link, Outlet } from "react-router-dom";
import {Button, Alert, Box, SpeedDial, SpeedDialAction, SpeedDialIcon} from '@mui/material'
import FileCopyIcon from '@mui/icons-material/FileCopy';
import SaveIcon from '@mui/icons-material/Save';
import PrintIcon from '@mui/icons-material/Print';
import ShareIcon from '@mui/icons-material/Share';

const actions = [
  { icon: <FileCopyIcon />, name: 'Copy' },
  { icon: <SaveIcon />, name: 'Save' },
  { icon: <PrintIcon />, name: 'Print' },
  { icon: <ShareIcon />, name: 'Share' },
];

// 导出一个默认的Home函数
export default function Home() {

  const [show, setShow]  = useState(false)

  // 返回一个div元素，包含一个h1元素，一个Button元素，两个Link元素和一个Outlet元素
  return (
    <div className="Home">
      <h1>Home</h1>

      {/* 使用Button组件，设置variant属性为contained，显示Hello world */}
      <Button onClick={()=>{
        setShow(!show)
      }} variant="contained">Hello world</Button>
      {show &&<Alert severity="success">This is a success Alert.</Alert>}

      <Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
      <SpeedDial
        ariaLabel="SpeedDial basic example"
        sx={{ position: 'absolute', bottom: 16, right: 16 }}
        icon={<SpeedDialIcon />}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
          />
        ))}
      </SpeedDial>
    </Box>

      {/* 使用Link组件，设置to属性为'/about'，显示about */}
      <Link to={'/about'}> about</Link>
      {/* 使用Link组件，设置to属性为'/list'，显示list */}
      <Link to={'/list'}> list</Link>
      {/* 使用Outlet组件 */}
      <Outlet/>
    </div>
  );
}
